package com.example.module_word.search.ui

import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.example.module_word.R
import com.example.module_word.search.viewmodel.DictionariesViewMode
import com.example.module_word.widget.noRippleClickable

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun SearchHistoryView(vm: DictionariesViewMode) {
    val allDictionaryResult by vm.dao.getSearchHistoryList()
        .collectAsStateWithLifecycle(initialValue = null)
    Column(
        Modifier
            .fillMaxWidth()
            .padding(horizontal = 20.dp)
    ) {
        Box(
            Modifier
                .fillMaxWidth()
                .padding(top = 28.dp)
        ) {
            Text(text = "搜索记录", fontSize = 16.sp, color = Color.Black)
            Image(
                painter = painterResource(id = R.mipmap.icon_delete),
                contentDescription = null,
                modifier = Modifier
                    .align(Alignment.TopEnd)
                    .noRippleClickable {
                        vm.deleteSearchHistoryList()
                    }
            )
        }
        FlowRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 10.dp),
            horizontalArrangement = Arrangement.spacedBy(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            allDictionaryResult?.forEach {
                Text(
                    text = it.word,
                    fontSize = 12.sp,
                    color = Color(0xFF9B9B9B),
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .widthIn(min = 60.dp)
                        .border(1.dp, Color(0xFF9B9B9B), RoundedCornerShape(12.dp))
                        .padding(horizontal = 13.dp, vertical = 4.dp)
                        .noRippleClickable {
                            vm.word.value = it.word
                            vm.getDictionaryResult()
                        })
            }
        }
    }
}